<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>计算属性案例</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>

    
        <div id ="root">
            姓：<input type="text" v-model="firstName"/><br/><br/>
            名：<input type="text" v-model="lastName"/><br/><br/>
            <!-- 插值语法实现拼接 -->
            <!-- 全名：<span>{{firstName}}-{{lastName}}</span> -->
             <!-- methods拼接 methods有几处读取就会调用几次-->
            <!-- 全名：<span>{{fullName()}}</span> -->
             <!-- 使用计算属性实现 -->
            全名：<span>{{fullName}}</span>
            全名：<span>{{fullName}}</span>
            全名：<span>{{fullName}}</span>
            全名：<span>{{fullName}}</span>
        </div>

        <script type="text/javascript">
            let a = 1 
            Vue.config.productionTip = false
            const vm = new Vue({
                el:'#root',
                data:{
                    firstName:'张',
                    lastName:'三'
                },
                methods:{
                    // fullName(){
                    //     return this.firstName+'-'+this.lastName
                    // }
                },
                //存放计算属性
                computed:{
                    //完整写法
                    /*fullName:{
                        //get作用：当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                        //上面有四个调用fullName属性，但是只调用了一次get，说明有缓存
                        //什么时候调用？1.初次读取fullName时；2.所依赖的数据发生变化时。
                        get(){
                            console.log('有人读取了！')
                            //console.log(this)//这里的this就是Vue实例，可以拿到data中的属性
                            return this.firstName+'-'+this.lastName+a
                            //虽然a也在计算属性上，但是不是Vue的数据，即使a改变也不会影响计算属性
                        },
                        //有get就有set，set什么时候调用？当fullName被修改时
                        set(value){
                            console.log('set',value)
                            const arr = value.split('-')
                            this.firstName = arr[0]
                            this.lastName = arr[1]
                        }
                    }*/
                   //简写方式step1：如果只需要get函数
                   /*fullName:{
                    get(){
                        console.log('有人读取了！')
                        return this.firstName+'-'+this.lastName
                    }
                   }*/
                   //step2:function()就相当于get函数fullName代表计算属性的名字
                   /*fullName:function(){
                    console.log('有人读取了！')
                    return this.firstName+'-'+this.lastName
                   }*/
                  //step3:最终写法-function也可以省略
                   fullName(){
                    console.log('有人读取了！')
                    return this.firstName+'-'+this.lastName
                   }
                }
            })
           
        </script>

        
    </body>
</html>